<template>
  <!--执行页 话术 -->
  <section class="component speech-content">
    <el-form ref="form" label-width="120px" :model="model">
      <el-form-item label="逾期阶段" prop="overduePeriod">
        <el-input v-model="overduePeriod" disabled></el-input>
      </el-form-item>
      <el-form-item label="话术模板" prop="templateId">
        <el-select v-model="model.templateId" placeholder="请选择" clearable @change="onTemplateChange">
          <el-option v-for="item in templateDataSet" :key="item.id" :label="item.templateName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="话术内容" prop="templateContent">
        <el-input type="textarea" v-model="model.templateContent" :maxlength="500" readonly :rows="5"></el-input>
      </el-form-item>
    </el-form>
  </section>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Layout, Dependencies } from '~/core/decorator'; 
import { Emit, Prop, Watch } from 'vue-property-decorator';
import { State, Getter, Mutation, Action, namespace } from 'vuex-class';
import { CaseOperatorPageService } from "~/services/domain-service/case-operator-page.service";
import { TemplateService } from "~/services/domain-service/template.service";

const CollectionExecutionModule = namespace('collection-execution');

@Component({

})
export default class SpeechContent extends Vue {
  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService
  @Dependencies(TemplateService)
  private templateService: TemplateService

  @CollectionExecutionModule.State
  private caseId: string

  private overduePeriod: string = ''

  private templateDataSet: any[] = []

  private model: any = {
    templateId: "",
    templateContent: ""
  };


  public refresh() {
    const form: any = this.$refs['form']
    form.resetFields()
    this.caseOperatorPageService.queryCaseInfo(this.caseId).subscribe(data => {
      this.overduePeriod = "M" + data.overduePeriod;
    });
  }

  @Watch("overduePeriod")
  private onOverduePeriod(val) {
    if (!val) {
      return;
    }
    const request: any = {
      overduePeriod: val && Number.parseInt(val.substr(1)) >= 6 ? 'M6' : val,
      templateCategory: "SPEECH"
    };
    this.templateService.getTemplateByOverduePeriod(request).subscribe(
      data => this.templateDataSet = data || []
    )
  }

  private onTemplateChange(templateId) {
    if (!templateId) {
      this.model.templateContent = ''
      return
    }
    const temp: any = this.templateDataSet.find(v => v.id === templateId)
    this.model.templateContent = temp.templateContent
  }

}
</script>

<style lang="less" scoped>
</style>